<template>
  <div class="wrapper">
    <div class="myDiv">
      <span class="my">我的</span>
    </div>
      <div class="wrapper">
        <div class="return">
          <img class="returnImg" src="../../../../src/assets/static/My/6.png">
        </div>
      </div>
        <div class="wrapper">
          <div class="usernameDiv">
            <span class="username">wangdecai</span>
          </div>
          <div class="modify">
            <span class="xgmodify">修改个人信息</span>
            <img class="more" src="../../../assets/static/My/1.png">
          </div>
        </div>

        <div class="wrapper">
          <div class="consumption">
            <img class="consumptionImg" src="../../../assets/static/My/3.png">
          </div>
        </div>
        <div class="recordDiv">
          <span class="record">我的消费记录</span>
        </div>
      <div>
      <div class="direction">
        <img class="directionImg" src="../../../assets/static/My/2.png">
      </div>
    </div>
    <div class="wrapper">
      <div class="wrapper">
        <div class="information">
          <img class="informationImg" src="../../../assets/static/My/4.png">
        </div>
      </div>
      <div class="informationDiv">
        <span class="information">我的信息</span>
      </div>
    </div>
    <div class="direction">
      <img class="directionImg" src="../../../assets/static/My/2.png">
    </div>
  <div class="wrapper">
    <div class="wrapper">
      <div class="cancellation">
        <img class="cancellationImg" src="../../../assets/static/My/5.png">
      </div>
    </div>
    <div class="cancellationDiv">
      <span class="cancellation">注销</span>
    </div>
  </div>
  <div class="wrapper">
  <div class="direction">
    <img class="directionImg" src="../../../assets/static/My/2.png">
  </div>
  </div>
  </div>

</template>

<script>
export default {
  name: 'Middle',
  components: {
  },
  data() {
    return {
      artical: [
        {}
      ],
    }
  },
  methods: {},
  mounted() {
  }
}
</script>

<style scoped>
/*-------------- div居中 -----------------*/
.wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.myDiv{
  display: flex;
  align-items: center;
  justify-content: center;
}
.return{
  display: flex;
  align-items: center;
  justify-content: center;
}
.usernameDiv{
  display: flex;
  align-items: center;
  justify-content: center;
}
.xgmodify{
  display: flex;
  align-items: center;
  justify-content: center;
}
.consumption{
  display: flex;
  align-items: center;
  justify-content: center;
}
.recordDiv{
  display: flex;
  align-items: center;
  justify-content: center;
}
.direction{
  display: flex;
  align-items: center;
  justify-content: center;
}
.information{
  display: flex;
  align-items: center;
  justify-content: center;
}
.informationDiv{
  display: flex;
  align-items: center;
  justify-content: center;
}
.cancellation{
  display: flex;
  align-items: center;
  justify-content: center;
}
.cancellationDiv{
  display: flex;
  align-items: center;
  justify-content: center;
 }
/*-------------- span字体 -----------------*/
.my{
  font-size: 36px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
}
.username{
  font-size: 36px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}
.xgmodify{
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
.record{
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
.information{
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;}
.cancellation{
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
/*-------------- img图片 -----------------*/
.returnImg{
  width: 750px;
  height: 1678px;
}
.more{
  width: 750px;
  height: 1678px;
}
.consumptionImg{
  width: 690px;
  height: 100px;
  background: #FFFFFF;
  border-radius: 16px;
}
.directionImg{
  width: 690px;
  height: 100px;
  background: #FFFFFF;
  border-radius: 16px;
}
.informationImg{
  width: 690px;
  height: 100px;
  background: #FFFFFF;
  border-radius: 16px;
}
.cancellationImg{
  width: 690px;
  height: 100px;
  background: #FFFFFF;
  border-radius: 16px;
}
</style>
